<template>
    <div class="area-content-pro">
        <div id="main_e1"></div>
    </div>
</template>
<script>
import * as echarts from 'echarts';

export default {
    props: ["data"],
    data() {
        return {
            chart: null,
            colorPalette: ['#1753FF', '#0EECFA', '#FF9F00'] // 主色系
        }
    },
    watch: {
        data: {
            handler(newVal) {
                if (newVal?.length) {
                    this.$nextTick(() => {
                        this.initChart(newVal);
                    });
                }
            },
            immediate: true,
            deep: true
        }
    },
    mounted() {
        window.addEventListener('resize', this.handleResize);
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.handleResize);
        if (this.chart) {
            this.chart.dispose();
        }
    },
    methods: {
        handleResize() {
            this.chart?.resize();
        },

        initChart(data) {
            // 1. 数据预处理
            const processedData = this.processData(data);

            // 2. 初始化图表
            if (!this.chart) {
                const chartDom = document.getElementById('main_e1');
                this.chart = echarts.init(chartDom);
            }

            // 3. 配置选项
            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line',
                        lineStyle: {
                            color: 'rgba(255,255,255,0.5)'
                        }
                    },
                    formatter: params => {
                        const date = params[0].axisValue;
                        return `${date}<br/>${params.map(p =>
                            `${p.marker}${p.seriesName}: ${p.value.toFixed(2)}`
                        ).join('<br/>')}`;
                    }
                },
                legend: {
                    top: '3%',
                    right: '3%',
                    textStyle: { color: '#fff' },
                    data: processedData.legend
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '8%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: processedData.categories,
                    axisLine: { lineStyle: { color: 'rgba(91, 124, 144, 1)' } },
                    axisLabel: {
                        color: '#fff',
                        // formatter: value =>
                        //     this.$options.filters.dateFormat(value, 'MM-dd') // 使用全局过滤器
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '日产量（单位）',
                    nameTextStyle: { color: '#fff' },
                    axisLine: { lineStyle: { color: 'rgba(91, 124, 144, 1)' } },
                    axisLabel: { color: '#fff' },
                    splitLine: { lineStyle: { type: 'dashed' } }
                },
                series: processedData.series
            };

            this.chart.setOption(option);
        },

        processData(rawData) {
            // 按产品分组
            const grouped = _.groupBy(rawData, 'NAME');

            // 生成图例
            const legend = Object.keys(grouped);

            // 处理时间轴（自动排序）
            const allDates = _.chain(rawData)
                .map('createTime')
                .sort()
                .uniq()
                .value();

            // 生成系列配置
            const series = legend.map((name, index) => {
                const data = grouped[name].map(item => ({
                    value: item.dayValue,
                    rawDate: item.createTime
                }));

                return {
                    name,
                    type: 'line',
                    smooth: true,
                    showSymbol: false,
                    lineStyle: {
                        width: 2,
                        color: this.colorPalette[index]
                    },
                    areaStyle: {
                        opacity: 0.4,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: this.colorPalette[index] },
                            { offset: 1, color: 'transparent' }
                        ])
                    },
                    data: data.map(d => d.value),
                    emphasis: {
                        focus: 'series'
                    }
                };
            });

            return {
                legend,
                categories: allDates,
                series
            };
        }
    }
}
</script>
<style lang="scss">
.area-content-pro {

    #main_e1 {
        width: 363px;
        height: 204px;
    }
}
</style>